<template>
  <n-card>
    <n-button type="primary" dashed size="small">
      <template #icon>
        <n-icon>
          <AddCircleOutline />
        </n-icon>
      </template>
      新增
    </n-button>
    <template v-for="(item, index) in urlTypeList">
      <div>
        <p>{{ item.title }}</p>
        <div class="p-tag">
          <template v-for="(urlList, index) in item.data">
            <n-card
              class="p-tag-card"
              @mouseout="handleMouseOut"
              @mousemove="handleMouseMove"
              :style="{ '--hover-index': hoverIndex + 'px' }"
              hoverable
              @click="openExternalLink(urlList.url)"
            >
              <div class="p-d-i">
                <n-icon size="30">
                  <!-- <img :src="item.icon" style="width: 100%; height: 100%" alt="" srcset="" /> -->
                  <n-image
                    style="width: 100%; height: 100%"
                    :src="urlList.icon"
                    :fallback-src="lose"
                  />
                </n-icon>
                <div>
                  <p class="p-h-t">{{ urlList.title }}</p>
                  <p class="p-h-b">{{ urlList.label }}</p>
                </div>
              </div>
            </n-card>
          </template>
        </div>
      </div>
    </template>
  </n-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import lose from "@/assets/img/lose2.png";
import { AddCircleOutline } from "@vicons/ionicons5";

const urlTypeList = ref([
  {
    title: "我的✨",
    data: [
      {
        icon: "https://gitee.com/favicon.ico",
        title: "我的Gitee",
        url: "https://gitee.com/",
        label: "我的Gitee✨",
      },
    ],
  },
  {
    title: "常用网站",
    data: [
      {
        icon: "https://animista.net/favicon.ico",
        title: "动画生成器",
        url: "https://animista.net",
        label: "一个在线生成css动画网址，支持代码复制",
      },
      {
        icon: "https://www.emojiall.com/favicon.ico",
        title: "emoji",
        url: "https://www.emojiall.com/zh-hans",
        label: "emoji表情",
      },
      {
        icon: "https://igoutu.cn/favicon.ico",
        title: "Icons8",
        url: "https://igoutu.cn/icons",
        label: "独特的风格矢量图网站，可以免费下载",
      },
      {
        icon: "https://tooltt.com/favicon.ico",
        title: "ToolTT",
        url: "https://tooltt.com/",
        label: "在线多种转换工具",
      },
      {
        icon: "https://www.grabient.com/favicon.ico",
        title: "Grabient",
        url: "https://www.grabient.com/",
        label: "在线渐变色网站，可以来这看看",
      },
      {
        icon: "https://docs.xygeng.cn/favicon.ico",
        title: "OpenApi免费接口",
        url: "https://docs.xygeng.cn/",
        label: "从这里开始快乐的写接口,简单，轻便，RESTful 标准，支持自动生成文档✨",
      },
      {
        icon: "https://ikuuu.pw//favicon.ico",
        title: "VPN工具",
        url: "https://ikuuu.pw/",
        label: "科学上网，支持客户端、移动端。使用方便✨",
      },
      {
        icon: "https://imzbf.github.io/favicon.ico",
        title: "Markdown工具",
        url: "https://imzbf.github.io/md-editor-v3/zh-CN",
        label: "一个Vue3 的Markdown工具 md-editor-v3，简单、易用",
      },
      {
        icon: "https://www.naiveui.com/assets/naivelogo-BdDVTUmz.svg",
        title: "Naive UI",
        url: "https://www.naiveui.com/zh-CN/os-theme",
        label: "一个 Vue 3 组件库比较完整，主题可调，使用 TypeScript，快有点意思",
      },
      {
        icon: "https://chat18.aichatos.xyz/#/chat/favicon.ico",
        title: "Aichat OS",
        url: "https://chat18.aichatos.xyz/#/chat/",
        label: "ChatGPT",
      },
      {
        icon: "https://xicons.org/#/favicon.ico",
        title: "xicons",
        url: "https://xicons.org/#/",
        label: "Niave UI 推荐的图标网站",
      },
      {
        icon: "https://undraw.co/favicon.ico",
        title: "undraw",
        url: "https://undraw.co/",
        label: "一个看起来还不错的矢量图库",
      },
      {
        icon: "https://idbao.vip/wp-content/uploads/2024/04/idbao.png",
        title: "idbao",
        url: "https://idbao.vip/",
        label: "一个资源网站？",
      },
      {
        icon: "https://mx-space.js.org/favicon.ico",
        title: "mx-space",
        url: "https://mx-space.js.org/",
        label: "mx-space部署教程",
      },
      {
        icon: "https://code-farmer-i.github.io/vue-markdown-editor/zh/favicon.ico",
        title: "v-md-editor",
        url: "https://code-farmer-i.github.io/vue-markdown-editor/zh/",
        label: "v-md-editor 是基于 Vue 开发的 markdown 编辑器组件",
      },
      {
        icon: "https://chatgpt.com/favicon.ico",
        title: "ChatGPT",
        url: "https://chatgpt.com/",
        label: "ChatGPT",
      },
      {
        icon: "https://magicui.design/icon.png",
        title: "Magic-UI",
        url: "https://magicui.design/docs/components/dock",
        label: "一个React的UI组件库，动画效果很棒",
      },
      {
        icon: "https://nav.xkzs.icu/icon.png",
        title: "NAV",
        url: "https://nav.xkzs.icu/",
        label: "一个很多工具的网站",
      },
      {
        icon: "https://themusecatcher.github.io/vue-amazing-ui/amazing-icon.svg",
        title: "Vue Amazing UI",
        url: "https://themusecatcher.github.io/vue-amazing-ui/",
        label: "一个vue3的组件库",
      },
      {
        icon: "https://inspira-ui.com/logo.svg",
        title: "Inspira UI",
        url: "https://inspira-ui.com/getting-started/introduction",
        label: "一个vue3的动画组件库",
      },
      {
        icon: "https://shiki.tmrs.site/logo.svg",
        title: "Shiki",
        url: "https://shiki.tmrs.site/guide/",
        label: "一款美观而强大的代码语法高亮器",
      },
      {
        icon: "https://uiverse.io/apple-touch-icon.png",
        title: "css 动画组件库",
        url: "https://uiverse.io/",
        label: "css 动画组件库",
      },
      {
        icon: "https://signaturely.com/online-signature/",
        title: "在线签名生成器",
        url: "https://signaturely.com/online-signature/",
        label: "在线签名生成器",
      },
      {
        icon: "https://wot-design-uni.pages.dev/",
        title: "Wot UI",
        url: "https://wot-design-uni.pages.dev/",
        label: "小程序UI框架",
      },
      {
        icon: "https://hu-snail.github.io/vue3-resource/",
        title: "Vue3-Resource",
        url: "https://hu-snail.github.io/vue3-resource/",
        label: "Vue3资源库",
      },
    ],
  },
  {
    title: "个人站点",
    data: [
      {
        icon: "https://innei.in/favicon.ico",
        title: " Innei",
        url: "https://innei.in/",
        label: "一个功能强大，风格个性的博客",
      },
      {
        icon: "https://blog.bywind.xyz/favicon.ico",
        title: "随风起的博客",
        url: "https://blog.bywind.xyz/",
        label: "一个风格挺好的博客",
      },
      {
        icon: "https://boke.lu/favicon.ico",
        title: "博客录",
        url: "https://boke.lu",
        label: "收录博客的网址，里面有很多优秀的博客",
      },
      {
        icon: "https://www.miaoer.xyz/favicon.ico",
        title: "喵二の小博客",
        url: "https://www.miaoer.xyz/",
        label: "深奥的站点真的看不懂呢~",
      },
      {
        icon: "https://arthals.ink/favicon/apple-touch-icon.png",
        title: "Arthals",
        url: "https://arthals.ink/",
        label: "一个北京大学大佬的博客~~",
      },
      {
        icon: "https://std.thyuu.com/logo.webp",
        title: "风记星辰",
        url: "https://www.thyuu.com/",
        label: "很漂亮的一个博客，文章很走心~",
      },
      {
        icon: "https://blog.nekorua.com/favicon.ico",
        title: "BLxcwg666",
        url: "https://blog.nekorua.com/",
        label: "Shiro主题的博客，里面有部署教程",
      },
      {
        icon:
          "https://ipfs.crossbell.io/ipfs/bafybeibefx2tyow77m2wcnsh5anaaxfy7ypxbcuapb52c4h255onqp72ye?img-quality=75&img-format=auto&img-onerror=redirect&img-width=384",
        title: "DIYgod",
        url: "https://diygod.cc/",
        label: "写代码是热爱，写到世界充满爱！",
      },
      {
        icon: "https://www.qzq.at/favicon.ico",
        title: "数字游牧人",
        url: "https://www.qzq.at/",
        label: "动画很棒的网站",
      },
      {
        icon: "https://blog.grtsinry43.com/favicon.ico",
        title: "风格有点像Innei",
        url: "https://blog.grtsinry43.com/",
        label: "总之岁月漫长，然而值得等待",
      },{
        icon: "https://yanyunfeng.com/favicon.ico",
        title: "鄢云峰",
        url: "https://yanyunfeng.com/",
        label: "首页的纸飞机好看",
      }
    ],
  },
  {
    title: "博客文章",
    data: [
      {
        icon: "https://blog.csun.site/favicon.ico",
        title: "文章AI摘要",
        url: "https://blog.csun.site/posts/0.html",
        label: "生成文章AI摘要",
      },
      {
        icon: "https://zhuanlan.zhihu.com/favicon.ico",
        title: "知乎 icon网站推荐",
        url:
          "https://zhuanlan.zhihu.com/p/629925780?utm_id=0&wd=&eqid=d53a60c3000969e40000000564d5e39a",
        label: "知乎推荐的矢量图网站",
      },
      {
        icon: "https://doctorwu.me/favicon.ico",
        title: "动态签名",
        url: "https://doctorwu.me/posts/animation-signature-zh",
        label: "为你的网站配置一个动态签名",
      },
    ],
  },
  {
    title: "GitHub",
    data: [
      {
        icon: "https://github.com/favicon.ico",
        title: "文章AI摘要",
        url: "https://github.com/qxchuckle/Post-Summary-AI",
        label: "生成文章AI摘要",
      },
    ],
  },
  {
    title: "框架",
    data: [
      {
        icon: "http://101.43.53.74:5005/Upload/logo.png",
        title: "Admin.NET",
        url: "http://101.43.53.74:5005/dist/index.html#/dashboard/notice",
        label: "一个功能强大的，采用C#开发的管理框架",
      },
      {
        icon: "https://furion.net/img/favicon.ico",
        title: "Furion",
        url: "https://furion.net/",
        label: "一个功能强大的，开源的.Net框架",
      },
      {
        icon: "https://handyorg.github.io/favicon.ico",
        title: "WPF的UI框架",
        url: "https://handyorg.github.io/handycontrol/quick_start/",
        label: "WPF的一个UI框架",
      },
    ],
  },
  {
    title: "工具",
    data: [
      {
        icon: "https://github.com/favicon.ico",
        title: "GitHub加速工具",
        url: "https://github.com/docmirror/dev-sidecar/releases",
        label: "当你龟速访问GitHub时，可以试试这个工具",
      },
      {
        icon: "https://www.navicat.com.cn/favicon.ico",
        title: "Navicat 免费版",
        url: "https://www.navicat.com.cn/download/navicat-premium-lite",
        label: "Navicat 免费版",
      },
      {
        icon: "https://imagestool.com/zh_CN/favicon.ico",
        title: "Images Tool",
        url: "https://imagestool.com/zh_CN/",
        label: "无需上传文件也可在线处理图片",
      },
    ],
  },
]);
const hoverIndex = ref();

const openExternalLink = (href) => {
  window.open(href, "_blank");
};
const handleMouseOut = () => {
  hoverIndex.value = null;
};
const handleMouseMove = (event: any) => {
  const rect = event.currentTarget.getBoundingClientRect();
  const x = event.clientX - rect.left;
  hoverIndex.value = x;
};
</script>

<style scoped lang="scss">
p {
  font-size: 20px;
}

.p-tag {
  display: flex;
  /* 允许换行 */
  flex-wrap: wrap;
  gap: 10px;

  .p-tag-card {
    /* 每个元素占据 1/3 的宽度，并减去一些间距 */
    flex: 0 0 calc(33.333% - 20px);
    margin: 5px;
    box-sizing: border-box;
    // min-width: 180px;
    cursor: pointer;
    border-radius: 10px;
    transition: transform 0.5s ease;
    background: radial-gradient(
      518.6137716972082px circle at 381.6666564941406px 16.550323486328125px,
      #2b748950 -19%,
      transparent 92%
    );
  }
  .p-tag-card:hover {
    background: radial-gradient(
      /*133.25778134526516px*/ circle at var(--hover-index) 55px,
      #f780ba99 0%,
      transparent 100%
    );
  }
  .p-tag-card:hover {
    transform: scale(1.05);
  }

  .p-d-i {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .p-h-t {
    margin: 2px;
  }
  .p-h-b {
    font-size: 0.9rem;
    color: #a19a9a;
    margin: 0px;
  }
}

.timeline-item {
  display: flex;
  justify-content: space-between;
  // white-space: nowrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

/* 操纵before结合hover实现循序渐进的下划线 */
.fadeIn-p {
  text-decoration: none;
  color: #333;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 2px;
}

.fadeIn-p::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  height: 2px;
  background-color: #3adb1d;
  width: 0;
  -webkit-transition: width 0.2s linear;
  transition: width 0.2s linear;
}

.fadeIn-p:hover::before {
  width: 100%;
  -webkit-transition: width 0.2s linear;
  transition: width 0.2s linear;
}

.fade-overlay {
  position: absolute;
  pointer-events: none;
  /* 确保鼠标事件穿透到下面的内容 */
  transition: height 0.3s ease;
  /* 0.3秒的高度平滑过渡，缓动函数为ease */
}

.fade-overlay.top,
.fade-overlay.bottom,
.fade-overlay.left,
.fade-overlay.right {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.fade-overlay.top {
  top: 0;
  left: 0;
  right: 0;
  height: 0px;
  /* 调整高度以达到所需的虚化宽度 */
}

.fade-overlay.bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.fade-overlay.left {
  top: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.fade-overlay.right {
  top: 0;
  bottom: 0;
  right: 0;
  width: 20px;
  background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
//   }
// }
</style>
